<template>
	<div class="favoite">
		<div class="recommend-title">
			<img class="title-img" src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png"/>
			<span class="title">猜你喜欢</span>
		</div>
		<ul class="ulContent">
			<router-link  	
				class="favoiteContent" 
				v-for="item of FavoiteList" 
				:key="item.id"
				:to="'/detail/' + item.id"
			>
				<div>
					<img :src="item.imgUrl" />
				</div>
				<div class="favoiteCont">
					<div class="favoiteTitle">{{item.title}}</div>					
					<div class="starComment">
						<star v-bind:dataList="item.star"></star><span class="Scomment">{{item.comment}}条评论</span>	
					</div>
					<div class="detailDesc">
						<span>查看详情</span>
					</div>
				</div> 
			</router-link>
		</ul>
	</div>
</template>

<script>
	import unitStar from '../../../unit/star.js'
	import star from '../../star/star.vue'
	export default {
		name:'HomeFavorite',
		props:{
			FavoiteList:Array
		},
		components:{
			star:star
		},
	}
</script>

<style lang="stylus" scoped>
	@import '../../../assets/styles/minxins.styl'
	.favoite
		margin-top:0.3rem
		background:#fff
		width:100%
		.recommend-title
			padding:0.24rem				
			.title-img
				width:0.3rem
				height:0.35rem
				display:inline-block
				overflow:hidden
				vertical-align:top
			.title
				font-size:0.4rem
		.ulContent
			width:100%		
			.favoiteContent
				display:flex
				felx-direction:row
				padding:0.24rem
				.favoiteCont
					padding:0.24rem
					width:6rem
					.favoiteTitle
						font-size:0.4rem
						font-weight:800
						min-width:0
						ellipsis()
					.starComment
						padding:0.2rem 0  0.2rem
						display:flex
						felx-direction:row
						.Scomment
							margin-left:0.3rem
							font-size:0.3rem
							margin-top:0.05rem
					.detailDesc
						background:#ff8300
						color:#fff
						text-align:center
						width:1.8rem
						line-height:0.5rem
						font-size:0.3rem
						border-radius:0.05rem
		
</style>